<template>
    <span ref="t">
        {{ data }}
    </span>
</template>

<script setup lang="ts">
import anime from 'animejs'
import { watch, ref, onMounted } from 'vue'
const p = defineProps<{ num?: number | string }>()
const data = ref(0)

onMounted(() => {
    const n = {
        num: 0
    }
    anime({
        targets: n,
        num: Number(p.num),
        easing: 'linear',
        round: 1,
        update() {
            data.value = Number(n.num)
        }
    })
})


watch(() => p.num, e => {
    
    data.value = 0
    const n = {
        num: 0
    }
    anime({
        targets: n,
        num: Number(p.num),
        easing: 'linear',
        round: 1,
        update() {
            data.value = Number(n.num)
        }
    })
})

</script>